<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>
   <!-- 
      id:标识元素的唯一性
      width:画布的宽度
      height:画布的高度
    -->
   <canvas id="c1" width="600" height="600">
      当前浏览器不支持canvas，请下载最新版浏览器
      <a href="https://www.google.cn/chrome/?standalone=1&platform=win64">立即下载</a>
   </canvas>

   <script>
      // 1.找到画布
      const c1 = document.getElementById('c1')

      // 判断是否有getContext
      if (!c1.getContext) {
         console.log('当前浏览器不支持canvas，请下载最新版浏览器')
      }
      // 2.获取画笔，上下文对象
      const ctx = c1.getContext('2d')
      console.log(ctx)
      // 获取图片
      let img = new Image()
      img.src = "../imgs/zhouye1.jpg"
      img.onload = function () {
         // 第二种绘制图片的方式(图片对象，绘制位置，绘制大小)
         ctx.drawImage(img, 0, 0, 400, 600)
         // 获取像素数据
         let imageData = ctx.getImageData(0, 0, 400, 600)
         // 循环修改数据
         for (let i = 0; i < imageData.data.length; i += 4) {
            // 计算出当前像素的平均值得到灰度效果
            let avg = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3
            imageData.data[i] = avg
            imageData.data[i] = avg
            imageData.data[i + 2] = avg
            imageData.data[i + 3] = 255
         }
         // 将修改后的数据重新渲染到画布上
         ctx.putImageData(imageData, 0, 0, 200, 300, 200, 300)
         console.log(imageData.data);
      }

   </script>
</body>

</html>